<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <title>第三页</title>
    <link rel="stylesheet" href="./one/index.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        #box {
            width: 100%;
            height: 100%;
            background-image: url('./images/第六页.png');
            background-size: 100vw 100vh;
            position: relative;
        }

        .con1,
        .con2,
        .con3 {
            overflow: hidden;
            width: 50px;
            position: absolute;
            height: 305px;
            top: 352px;
            background-size: 100%;
        }

        .con1 div,
        .con2 div,
        .con3 div {
            width: 100%;
            height: 0;
            background-size: 100%;
            transition: all 2s;

        }

        .con1 {
            left: 318px;
            background-image: url('./images/diliu1.png');
        }

        .con1 div {
            background-image: url('./images/con2f.png');
        }

        .con2 {
            left: 744px;
            background-image: url('./images/diliu2.png');
        }

        .con2 div {
            background-image: url('./images/con1f.png');
        }

        .con3 {
            left: 1166px;
            background-image: url('./images/diliu3.png');
            height: 337px;
        }

        .con3 div {
            background-image: url('./images/con3f.png');
        }

        .con1:hover,
        .con2:hover,
        .con3:hover {
            background: none;
        }

        .con1:hover div,
        .con2:hover div,
        .con3:hover div {
            height: 100%;
        }

        a {
            display: block;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <nav role="navigation" class="nav">
        <div id="menuToggle">
            <input type="checkbox" />
            <span></span>
            <span></span>
            <span></span>
            <ul id="menu">
                <a href="./第一页.html">
                    <li>主页</li>
                </a>
                <a href="./第二页.html">
                    <li>发现</li>
                </a>
                <a href="./第三页.html">
                    <li>简介</li>
                </a>
                <a href="./第四页.html">
                    <li>壁画</li>
                </a>
                <a href="./第六页.html">
                    <li>经书</li>
                </a>
            </ul>
        </div>
    </nav>
    <div id="box">

    </div>
    <div class="con1">
        <div>
            <a href="./十二页.html"></a>
        </div>
    </div>
    <div class="con2">
        <div>
            <a href="./十一页.html"></a>
        </div>
    </div>
    <div class="con3">
        <div>
            <a href="./十三页.html"></a>
        </div>
    </div>
</body>
<script src="./one/index.js"></script>
<script>
    const data = new Stefocuse('#box', '第六页');
</script>

</html>